<?php
echo $this->Html->css('jquery-ui');
echo $this->Html->css('ui.jqgrid');

echo $this->Html->script('grid.locale-en');
echo $this->Html->script('jquery.jqGrid.min');
?>
<div class="locations index">
    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#list").jqGrid(
            {
                url:'<?php echo $this->Html->url(array("controller" => "locations", "action" => "index", "admin" => true, "ajax" => true)); ?>',
                datatype: "json",
                mtype: "GET",
                colNames:['Name','City','Actions'],
                colModel:[
                    {name:'name',index:'name', width:30, search:true},
                    {name:'city',index:'city', width:30, search:true},
                    {name:'actions',width:50,sortable:false, align:"center",search:false}
                ],
                rowNum:10,
                rowList:[10,20,30],
                pager: jQuery('#pager'),
                sortname: 'name',
                viewrecords: true,
                sortorder: "asc",
                caption:"Locations",
                height:"auto",
                autowidth: true,
                navigator:true
            });
            jQuery("#list").navGrid("#pager",{edit:false,add:false,del:false,search:false});
            jQuery("#list").jqGrid('filterToolbar');
        })
    </script>
    <h3><?php __('Locations'); ?></h3>
    <table id="list" style="height:auto;"></table>
    <div id="pager"></div>
</div>